<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0">
<title>方法论 &middot; Bootstrap</title>
<!-- Bootstrap 核心CSS -->
<link href="../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 本文档额外专用css -->
<link href="../assets/css/docsearch.min.css" rel="stylesheet">
<link href="../assets/css/docs.min.css" rel="stylesheet">

<!-- Favicons图标定义 -->
<link rel="apple-touch-icon" href="../assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="../assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="../assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
  
<link rel="mask-icon" href="../assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="../favicon.ico">
<meta name="msapplication-config" content="../assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">

<!-- Meta关键字定义 -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">

<!-- Twitter -->
<meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Introduction">
<meta name="twitter:description" content="图标 Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.">
<meta name="twitter:image" content="../assets/brand/bootstrap-social.png">

<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/getting-started/introduction/">
<meta property="og:title" content="Introduction">
<meta property="og:description" content="图标 Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.">
<meta property="og:type" content="website">
<meta property="og:image" content="../assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="../assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
</head>
<body>
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container"> <span class="skiplink-text">跳到主体内容</span> </div>
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <a class="navbar-brand mr-0 mr-md-2" href="../index.html" aria-label="Bootstrap">
  <svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false">
    <title>Bootstrap</title>
    <path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/>
    <path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/>
  </svg>
  </a>
  <div class="navbar-nav-scroll">
    <ul class="navbar-nav bd-navbar-nav flex-row">
      <li class="nav-item"><a class="nav-link " href="../index.html">首页</a></li>
      <li class="nav-item"><a class="nav-link active" href="../docs/index.html">中文手册</a></li>
      <li class="nav-item"><a class="nav-link " href="../examples/index.html">实例</a></li>
      
      
      
      
    </ul>
  </div>
  
  <a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="../extend/download.html">下载 Bootstrap</a> </header>

<div class="container-fluid">
  <div class="row flex-xl-nowrap">
    <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
      


<nav class="collapse bd-links" id="bd-docs-nav">
  <div class="bd-toc-item"> <a class="bd-toc-link" href="../docs/index.html"> 快速入门 </a>
    <ul class="nav bd-sidenav">
    <li><a href="../docs/index.html">关于</a></li>
    <li><a href="../docs/download.html">下载</a></li>
    <li><a href="../docs/contents.html">目录结构</a></li>
    <li><a href="../docs/browsers-devices.html">浏览器与设备调优</a></li>
    <li><a href="../docs/javascript.html">JavaScript脚本</a></li>
    <li><a href="../docs/theming.html">主题化</a></li>
    <li><a href="../docs/build-tools.html">编译工具</a></li>
    <li><a href="../docs/webpack.html"> Webpack模块化</a></li>
    <li><a href="../docs/accessibility.html">无障碍浏览</a></li>
    </ul>
  </div>
  <div class="bd-toc-item"> <a class="bd-toc-link" href="../layout/overview.html"> 布局 </a>
    <ul class="nav bd-sidenav">
    <li><a href="../layout/overview.html">概述</a></li>
    <li><a href="../layout/grid.html">栅格</a></li>
    <li><a href="../layout/utilities-for-layout.html"> 布局实施建议 </a> </li>
    </ul>
  </div>
<div class="bd-toc-item"> <a class="bd-toc-link" href="../content/reboot.html">内容 </a>
  <ul class="nav bd-sidenav">
    <li><a href="../content/reboot.html"> 初始化与CSS重置 </a> </li>
    <li><a href="../content/typography.html"> 排版 </a> </li>
    <li><a href="../content/code.html"> 代码 </a> </li>
    <li><a href="../content/images.html"> 图片 </a> </li>
    <li><a href="../content/tables.html"> 表格 </a> </li>
    <li><a href="../content/figures.html"> 图文框 </a> </li>
  </ul>
</div>
<div class="bd-toc-item"> <a class="bd-toc-link" href="../components/alerts.html"> 组件 </a>
  <ul class="nav bd-sidenav">
   <li><a href="../components/alerts.html"> 警告提示框(Alerts) </a> </li>
    <li><a href="../components/badge.html"> 徽章(Badge) </a> </li>
    <li><a href="../components/breadcrumb.html"> 面包屑导航(Breadcrumb) </a> </li>
    <li><a href="../components/buttons.html"> 按钮(Button) </a> </li>
    <li><a href="../components/button-group.html"> 按钮组(Button-group) </a> </li>
    <li><a href="../components/card.html"> 卡片(Card) </a> </li>
    <li><a href="../components/carousel.html">  轮播效果(Carousell) </a> </li>
    <li><a href="../components/collapse.html"> 折叠面板(Collapse) </a> </li>
    <li><a href="../components/dropdowns.html"> 下拉菜单(Dropdown) </a> </li>
    <li><a href="../components/forms.html"> 表单(Form) </a> </li>
    <li><a href="../components/input-group.html"> 输入框(Input-group) </a> </li>
    <li><a href="../components/jumbotron.html"> Hero大块屏(Jumbotron) </a> </li>
    <li><a href="../components/list-group.html"> 列表组(List-group) </a> </li>
    <li><a href="../components/media-object.html"> 媒体对象/图文混排(Media-object) </a> </li>
    <li><a href="../components/modal.html"> 弹出模态框(Modal) </a> </li>
    <li><a href="../components/navs.html"> 导航/滑动门(Nav) </a> </li>
    <li><a href="../components/navbar.html"> 导航栏(Navbar) </a> </li>
    <li><a href="../components/pagination.html"> 分页(Pagination) </a> </li>
    <li><a href="../components/popovers.html"> POP提示(Popover) </a> </li>
    <li><a href="../components/progress.html"> 进度条(Progress) </a> </li>
    <li><a href="../components/scrollspy.html"> 滚动监听(Scrollspy) </a> </li>
    <li><a href="../components/spinners.html"> 旋转特效(Spinners) </a> </li>
    <li><a href="../components/toasts.html"> 弹出提示框(Toasts) </a> </li>
    <li><a href="../components/tooltips.html"> 提示冒泡(Tooltip) </a> </li>
  </ul>
</div>
<div class="bd-toc-item"> <a class="bd-toc-link" href="../utilities/borders.html"> 公共样式 </a>
  <ul class="nav bd-sidenav">
    <li><a href="../utilities/borders.html"> 边框(border) </a> </li>
    <li><a href="../utilities/clearfix.html"> 清动浮动(clearfix) </a> </li>
    <li><a href="../utilities/close-icon.html"> 关闭图标(close icon) </a> </li>
    <li><a href="../utilities/colors.html"> 颜色(color) </a> </li>
    <li><a href="../utilities/display.html"> Display显示属性 </a> </li>
    <li><a href="../utilities/embed.html"> 嵌入(embed) </a> </li>
    <li><a href="../utilities/flex.html"> Flex弹性布局 </a></li>
    <li><a href="../utilities/float.html"> Float浮动属性 </a> </li>
    <li><a href="../utilities/image-replacement.html"> 图像替换 </a> </li>
    <li><a href="../utilities/position.html"> Position固顶(底)及定位 </a> </li>
    <li><a href="../utilities/screenreaders.html"> 读屏器 (Screenreaders)</a></li>
    <li><a href="../utilities/shadows.html"> 阴影(shadows)</a></li>
    <li><a href="../utilities/sizing.html"> 规格(sizi)</a></li>
    <li><a href="../utilities/spacing.html"> 间隔(spacing) </a> </li>
    <li><a href="../utilities/text.html"> 文本处理 </a> </li>
    <li><a href="../utilities/vertical-align.html"> 垂直对齐(vertical align) </a> </li>
    <li><a href="../utilities/visibility.html"> Visibility显示或隐藏(能见度)处理 </a> </li>
  </ul>
</div>
<div class="bd-toc-item active"> <a class="bd-toc-link" href="approach.html"> 延伸</a>
  <ul class="nav bd-sidenav">
    <li class="active bd-sidenav-active"> <a href="approach.html"> 方法论 </a> </li>
    <li><a href="icons.html"> 图标 </a> </li>
  </ul>
</div>
<div class="bd-toc-item"> <a class="bd-toc-link" href="../migration/index.html"> 迁移 </a>
  <ul class="nav bd-sidenav">
  </ul>
</div>
<div class="bd-toc-item"> <a class="bd-toc-link" href="../about/history.html"> 关于 </a>
  <ul class="nav bd-sidenav">
    <li><a href="../about/history.html"> History </a> </li>
    <li><a href="../about/team.html"> Team </a> </li>
    <li><a href="../about/brand.html"> Brand </a> </li>
    <li><a href="../about/license.html"> License </a> </li>
    <li><a href="../about/translations.html"> Translations </a> </li>
  </ul>
</div>
</nav>
</div>


<div class="d-none d-xl-block col-xl-2 bd-toc">
  <ul class="section-nav">
    <li class="toc-entry toc-h2"><a href="#preferred">首选推荐</a></li>
    <li class="toc-entry toc-h2"><a href="#more-options">更多选择</a></li>
  </ul>
</div>
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
  <h1 class="bd-title" id="content">方法论</h1>
  <p class="bd-lead">了解用于构建和维护Bootstrap的指导原则、策略和技术，从而更轻松地自定义和扩展它。</p>
  <p>伟大导师指导我们，方法论决定出路和思路，原文此节为“Approach”，一般翻译为：方法、途径，我们将其命名为“方法论”-译者注。</p>
   

  <h2 id="summary">概要</h2>
	<p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">我们将更深入地介绍这些，但是在高层次上，这是指导我们的方法。</font></font></p>
	<ul>
	  <li><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">组件应该是响应式和移动式的</font></font></li>
	  <li><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">组件应该使用基类来构建，并通过修饰符类进行扩展</font></font></li>
	  <li><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">组件状态应该遵循一个共同的z-索引尺度</font></font></li>
	  <li><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">只要有可能，就比较喜欢HTML和CSS的JavaScript实现</font></font></li>
	  <li><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">只要有可能，使用实用程序超过自定义样式</font></font></li>
	  <li><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">尽可能避免强制执行严格的HTML要求（儿童选择器）</font></font></li>
	</ul>
  <h2 id="responsive">响应</h2>
  <p>Bootstrap的响应式样式是建立在响应式的基础之上的，这种方式通常被称为移动优先。我们在我们的文档中使用这个术语，基本上赞同它，但有时它可能太宽泛。虽然并不是每个组件都必须完全响应Bootstrap，但这种响应方法是通过在视口变大时推动添加样式来减少CSS覆盖。</p>
  <p>跨越Bootstrap，您会在我们的媒体查询中看到最清楚的内容。在大多数情况下，我们使用<code>min-width</code>开始在特定断点处应用的查询，并通过更高的断点进行查询。例如，<code class="highlighter-rouge">.d-none</code> 适用于 <code class="highlighter-rouge">min-width: 0</code>另一方面， <code class="highlighter-rouge">.d-md-none</code>从中断点开始适用。</p>
  <p>有时我们会 <code class="highlighter-rouge">max-width</code> 在组件的内在复杂性需要时使用它。有时候，这些重写在功能上和精神上都比重写组件的核心功能来实现和支持。我们力求限制这种方法，但会不时使用它。</p>
 
 <h2 id="classes">类</h2> 
 <p> 除了我们的Reboot，一个跨浏览器的规范化样式表，我们所有的样式都是用类作为选择器。这意味着清除类型选择器 (例如, <code class="highlighter-rouge">input[type="text"]</code>) 和无关的父类 (例如, <code class="highlighter-rouge">.parent .child</code>) 使样式太具体，不容易覆盖。</p>
 <p>因此，组件应该建立一个基类，其中包含共同的，不会被重写的属性值对。例如，<code class="highlighter-rouge">.btn</code> 和 <code class="highlighter-rouge">.btn-primary</code>. 我们使用 <code class="highlighter-rouge">.btn</code> 了所有常见的样式，比如 <code class="highlighter-rouge">display</code>, <code class="highlighter-rouge">padding</code>, 和 <code class="highlighter-rouge">border-width</code>. 然后我们使用修饰符<code class="highlighter-rouge">.btn-primary</code> 来添加颜色，背景颜色，边框颜色等。</p>
 <p>只有当多个属性或值可以在多个变体中进行更改时才应使用修饰符类。修饰符并不总是必要的，所以确保你实际上保存了代码行，并且在创建它们时避免不必要的覆盖。修饰符的好例子是我们的主题颜色类和尺寸变体。</p>
 
<h2 id="z-index-scales">z-索引尺度</h2>
<p> <code class="highlighter-rouge">z-index</code> 引导组件中的引导程序元素和叠加组件中有两个标度。</p>
 <h3 id="component-elements">组件元素</h3>
 <ul>
  <li>Bootstrap中的某些组件是使用重叠元素构建的，以防止双边框而不修改border属性。例如，按钮组，输入组和分页。</li>
  <li>这些组件共享标准 <code class="highlighter-rouge">z-index</code>的<code class="highlighter-rouge">0</code> 通过 <code class="highlighter-rouge">3</code>.</li>
  <li><code class="highlighter-rouge">0</code> 是默认（初始）, <code class="highlighter-rouge">1</code> 是 <code class="highlighter-rouge">:hover</code>, <code class="highlighter-rouge">2</code> 是 <code class="highlighter-rouge">:active</code>/<code class="highlighter-rouge">.active</code>, 和 , <code class="highlighter-rouge">3</code> 是 <code class="highlighter-rouge">:focus</code>.</li>
  <li>这种方法符合我们对最高用户优先级的期望。如果一个元素集中在一个元素上，这个元素在用户的视线中。活动元素是第二高的，因为它们表示状态。悬停是第三高的，因为它表示用户的意图，但几乎任何东西都可以悬停。</li>
</ul>
<h3 id="overlay-components">覆盖组件</h3>
<p>Bootstrap包含几个用作某种叠加层的组件。这包括按照最高顺序 <code class="highlighter-rouge">z-index</code>，下拉菜单，固定和粘滞的导航栏，模式，工具提示和弹出窗口。这些组件有自己的 <code class="highlighter-rouge">z-index</code> 规模，开始于 <code class="highlighter-rouge">1000</code>,这个起始号码是随机的，并作为我们的样式和您的项目的自定义样式之间的一个小缓冲区。</p>
<p>每个叠加组件都会 <code class="highlighter-rouge">z-index</code> 以这种方式稍微提高其价值，即通用的UI原则允许用户聚焦或悬停的元素始终保持在视图中。例如，一个模态是文档阻塞（例如，除了模态的动作，你不能采取任何其他的行动），所以我们把它放在我们的导航栏上面。</p>
<p>在我们的 <a href="https://code.z01.com/docs/4.0/layout/overview/#z-index"><code class="highlighter-rouge">z-index</code> 布局页面中了解更多信息。</a></p>
<h2 id="html-and-css-over-js">JS上的HTML和CSS</h2>
<p>只要有可能，我们更喜欢通过JavaScript编写HTML和CSS。一般来说，HTML和CSS更为丰富，可供更多不同经验水平的人使用。HTML和CSS在浏览器中的速度也比JavaScript快，而且您的浏览器将为您提供大量的功能。</p>
<p>这个原则是我们的一流JavaScript API的 <code class="highlighter-rouge">data</code> 属性。 您不需要编写几乎任何JavaScript来使用我们的JavaScript插件; 相反，写HTML。在我们的 <a href="">dataJavaScript概述页面</a>中了解更多。</p>
<p>最后，我们的风格建立在常见网页元素的基本行为上。只要有可能，我们宁愿使用浏览器提供的内容。例如，你.<code class="highlighter-rouge">.btn</code>几乎可以在任何元素上放置一个类，但大多数元素不提供任何语义值或浏览器功能。所以相反，我们使用 <code class="highlighter-rouge">&lt;button&gt;</code>s和 <code class="highlighter-rouge">&lt;a&gt;</code>s.</p>
<p>对于更复杂的组件也是如此。虽然我们可以编写我们自己的表单验证插件，根据输入的状态将类添加到父元素，从而使我们可以将文本设置为红色，我们更喜欢使用每个浏览器提供给我们的<code class="highlighter-rouge">:valid</code>/<code class="highlighter-rouge">:invalid</code>伪元素。</p>
<h2 id="utilities"><div>公用事业<a class="anchorjs-link " href="#utilities" aria-label="Anchor" data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></div></h2>
<p>实用程序类（以前是Bootstrap 3的助手）是在处理CSS膨胀和糟糕的页面性能方面的强大盟友。一个工具类通常是一个单一的，不可变的属性 - 值对，表示为一个类（例如, <code class="highlighter-rouge">.d-block</code> 表示 <code class="highlighter-rouge">display: block;</code>)。他们主要的吸引力是编写HTML时的使用速度，并限制了您必须编写的自定义CSS的数量。</p>
<p>特别是关于自定义CSS，实用程序可以通过将最常见的重复属性值对减少为单个类来帮助应对不断增加的文件大小。这可以在您的项目中产生戏剧性的效果。</p>
<h2 id="flexible-html">灵活的HTML</h2>
<p>尽管并非总是可行，但我们力求避免在HTML组件的HTML要求中过于教条化。因此，我们将重点放在CSS选择器中的单个类，并尽量避免直接选择子选择器（<code class="highlighter-rouge">~</code>）。这使您在实现时有更大的灵活性，并有助于保持我们的CSS更简单，更具体。</p>
</main>
</div>
</div>



<script src="../js/jquery-3.2.1.slim.min.js"></script> 
<script>window.jQuery || document.write('<script src="../assets/js/vendor/jquery-slim.min.js"><\/script>')</script> 
<script src="../dist/js/popper.min.js"></script> 
<script src="../dist/js/bootstrap.min.js"></script> 
<script src="../assets/js/docs.min.js"></script> 
<script src="../assets/js/ie-emulation-modes-warning.js"></script> 
<script src="../assets/js/docsearch.min.js"></script> 
 

</body>
</html>
